<template>
  <div class="main">
        <Header/>
        <div class="content-box">
            <div class="top">
                <h4>1季度多家房企利润跌幅超50%去库存促销战打响</h4>
                <DataTime :flag="dateTimeItem.flag" :date="dateTimeItem.date" :clickNum = dateTimeItem.clickNum />
                <div class="text">啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧啊吧</div>
                <div class="title">多家企业销售下滑</div>
                <div class="text">恰饭恰饭恰饭恰饭恰饭恰饭恰饭恰饭恰饭恰饭恰饭恰饭恰饭恰饭恰饭恰饭恰饭恰饭恰饭恰饭恰饭恰饭恰饭恰饭</div>
                <div class="title">趋势</div>
                <div class="text">恰饭恰饭恰饭恰饭恰饭恰饭恰饭恰饭恰饭恰饭恰饭恰饭恰饭恰饭恰饭恰饭恰饭恰饭恰饭恰饭恰饭恰饭恰饭恰饭</div>
                <div class="title">地价占比上升去库存压力下 啊吧啊吧啊吧</div>
                <div class="text">恰饭恰饭恰饭恰饭恰饭恰饭恰饭恰饭恰饭恰饭恰饭恰饭恰饭恰饭恰饭恰饭恰饭恰饭恰饭恰饭恰饭恰饭恰饭恰饭</div>
                <div class="title">牛气冲天</div>
                <div class="text">恰饭恰饭恰饭恰饭恰饭恰饭恰饭恰饭恰饭恰饭恰饭恰饭恰饭恰饭恰饭恰饭恰饭恰饭恰饭恰饭恰饭恰饭恰饭恰饭</div>
                <div class="title">啊吧啊吧啊吧</div>
            </div>
            <div class="commit">
                <h2>评论</h2>
                <mt-field  v-model="commitText" placeholder="请输入评论" type="textarea" rows="2"></mt-field>
                <mt-button type="primary" @click="commitBtn">发表评论</mt-button>
            </div>
            <div class="bottom">
                <div class="item" v-for="(item,index) in commitList" :key="index">
                    <div class="date-time">
                        <span>第{{index+1}}楼</span>
                        <span>用户 : {{item.user}}</span>
                        <span>发表时间:</span>
                        <span>{{item.dateTime}}</span>
                    </div>
                    <div class="commit-text">
                        {{item.commitText}}
                    </div>
                </div>
                <div class="load">
                    <mt-button @click="loadData" class="mint-button mint-button--danger mint-button--large is-plain">加载更多</mt-button>
                </div>
            </div>
        </div>
  </div>
</template>

<script>
import { Toast } from 'mint-ui';
import DataTime from '../DataTime.vue'
import Header from '../Header/Header.vue'
export default {
    components: { Header, DataTime },
    data(){
        return {
            commitText:'',
            dateTimeItem:{
                flag : true,
                date:'2015-02-16 11:20:20',
                clickNum:5
            },
            commitList:[
                {
                    user:'本地用户',
                    dateTime:'2021-03-02 11:11:11',
                    commitText:'抠尼吉蛙'
                },
                {
                    user:'匿名用户',
                    dateTime:'2021-03-02 11:12:11',
                    commitText:'抠尼吉蛙'
                },
            ]
        }
    },
    methods:{
        commitBtn(){
            if ( !this.commitText){
                Toast('请输入评论内容!');
                return
            }
            let dateTime =  new Date().toLocaleString().replace(/\//g,'-').replace('下午','  ')
            this.commitList.unshift({
                user:'本地用户',
                dateTime,
                commitText:this.commitText,
            })
            Toast('发表成功!')
            this.commitText = ''
        },
        loadData(){
            this.commitList.push({
                user:'匿名用户',
                dateTime:new Date().toLocaleString().replace(/\//g,'-').replace('下午','  '),
                commitText:'加载'
            },)
        }
    }
}
</script>

<style scoped>
.main{
    margin-bottom: 8vh;
}
.content-box{
    padding: 10px 8px;
}
.content-box .top>div{
    margin-bottom: 8px;
    text-align: left;
}
.top{
    margin-top: 6vh;
}
h4{
    color: #e60606;
    margin-bottom: 8px;
}
.title{
    font-weight: 600;
    color: #666;
    font-size: 16px;
    margin-bottom: 8px;
}
h2{
    text-align: left;
    margin-bottom: 8px;
    border-bottom: 1px solid #eee;
}
.commit >>>.mint-field-core{
    resize: none;
}
.mint-cell{
    margin: 8px 0px;
}
.mint-button{
    margin: 5px 0px;
    width: 100%;
}
.bottom .item{
    text-align: left;
}
.date-time{
    font-size: 14px;
    font-weight: 500;
    background: #eee;
    line-height: 30px;
}
.commit-text{
    line-height: 40px;
}
</style>